<template>
	<div class="select-box" id="select" @mouseup.stop :style="{width:width+'px', minWidth:'200px'}">
		<div class="select-border">
			<input class="noborder-input" type="text" v-model="inputvalue" />
			<div class="right-box">
				<button @click="addnew" :style="{
					width:'max-content' 
				}">追加</button>
				<div @click="draw">
					<span v-if="!arrow" class="uparrow"></span>
					<span v-if="arrow" class="downarrow"></span>
				</div>
			</div>
		</div>
		<transition name="select">
			<div v-if="arrow" class="select-list">
				<div v-for="item in selectList" :key="item.code">
				<div
					class="select-list-each"
					@click="selectvalue(item)"
					:class="{'choose-list':item.code===selectcode}"
					>{{item.value}}</div>
				</div>
			</div>
		</transition>
	</div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue'
const { selectList, width } = defineProps(['modelValue', 'selectList', 'width'])

const emit = defineEmits(['update:modelValue'])
let arrow = ref(false)
function draw() {
	arrow.value = !arrow.value
}
let inputvalue = ref(undefined)
let selectcode = ref(undefined)
function addnew() {
	if (!inputvalue.value) return
	if (selectList.some((item) => item.value === inputvalue.value)) {
		return alert('添加内容重复')
	}
	selectList.push({
		code: selectList.length,
		value: inputvalue.value
	})
	selectcode.value = selectList.length - 1
	emit('update:modelValue', inputvalue.value)
}
function selectvalue(item) {
	inputvalue.value = item.value
	selectcode.value = item.code
	arrow.value = !arrow.value
	emit('update:modelValue', inputvalue.value)
}

onMounted(() => {
	nextTick(() => {
		mouseUpLisenter()
	})
})
function mouseUpLisenter() {
	document.body.addEventListener('mouseup', dosome)
}
onBeforeUnmount(() => {
	document.body.removeEventListener('mouseup', dosome)
})
function dosome(event) {
	arrow.value = false
}
</script>
<style lang='scss' scoped>
.select-box {
	display: flex;
	flex-flow: column;
	position: relative;
}
.select-border {
	border: 1px #aaa solid;
	display: flex;
	justify-content: space-between;
}
.noborder-input {
	border: none;
	width: 100%;
&:focus-visible {
	outline: none;
}
}
.select-enter-from,
.select-leave-to {
	opacity: 0;
	transform: scale(0.9);
}
.select-enter-active,
.select-leave-active {
	transform-origin: top center;
	transition: opacity 0.4s cubic-bezier(0.5, 0, 0, 1.25),
	transform 0.2s cubic-bezier(0.5, 0, 0, 1.25);
}
.select-list {
	background: #fff;
	z-index: 9;
	position: absolute;
	width: 100%;
	top: 30px;
	border: 1px #777 solid;
	border-radius: 5px;
	&-each:hover {
	background: #ddd;
}
}
.choose-list {
	background: #7df;
}
.uparrow {
	border: 3px solid black;
	border-width: 0px 2px 2px 0px;
	display: inline-block;
	padding: 3px;
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	margin: 0 5px;
}
.downarrow {
	border: 3px solid black;
	border-width: 0px 2px 2px 0px;
	display: inline-block;
	padding: 3px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	margin: 0 5px;
}
.right-box {
	display: flex;
}
</style>
